<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#edit_form{
				display: none;
			}
			#pagenation li{
				list-style: none;
				border: 1px solid red;
				padding: 5px 10px;
				margin: 0 5px;
				display: inline-block;
				cursor: pointer;
				font-weight: 900;
			}
			#pagenation .active{
				color: #0000FF;
			}
		</style>
		
		<input type="text" placeholder="物品名称" id="txt_search_itemname"><button id="search_btn">查询</button>
		<table class="dataList">
			<thead>
				<tr>
					<td>
						<input type="checkbox" id="ckAll">
					</td>
					<td>物品id</td>
					<td>物品名称</td>
					<td>物品单价</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<input type="checkbox" class="ckitem">
					</td>
					<td class="txt_itemid">物品id</td>
					<td>名字123</td>
					<td>价格123</td>
				</tr>
			</tbody>
		</table>
		
		<ul id="pagenation"></ul>
		
		
		<button id="delete_btn">删除</button>
		<button id="edit_btn">修改</button>		
		
		<div id="edit_form">
			<input type="hidden" id="txt_edit_item_id">
			<input type="text"  id="txt_edit_item_name" placeholder="物品名称">
			<input type="text" id="txt_edit_item_price" placeholder="物品单价">
			<button id="confirm_edit_btn">提交</button>
		</div>
		
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>
			
			// var current = 1; //当前所在页数
			// var pagesize = 15; //每页几条数据
			// // var total = 0;
			
			
			// // 初始化列表
			// getList();
			
			
			
			// // 初始化分页
			// function initPage(total, pagesize, current){
			// 	// 清空所有li
			// 	$('#pagenation').empty();
				
			// 	// 总页数
			// 	var pagenum = Math.ceil(total/pagesize);
			// 	for(var i=1; i<=pagenum; i++){
			// 		if(current == i){
			// 			$('#pagenation').append("<li class='active'>"+i+"</li>");
			// 		}else{
			// 			$('#pagenation').append("<li>"+i+"</li>");
			// 		}
			// 	}
			// }
			
			// // 点击页面重新拉取列表
			// // 事件代理委托
			// $('#pagenation').on('click', 'li', function(){
			// 	// console.log($(this).text());
			// 	current = $(this).text();
			// 	getList();
			// })
			
			
			// // 查询
			// $('#search_btn').click(function(){
			// 	getList();
			// })
			
			// // 修改弹窗
			// $('#edit_btn').click(function(){
			// 	var target = $('.ckitem:checked').parents("tr");
			// 	var item_id = $('.ckitem:checked').parents("tr").find('td:nth-child(2)').text();
			// 	var item_name = $('.ckitem:checked').parents("tr").find('td:nth-child(3)').text();
			// 	var item_price = $('.ckitem:checked').parents("tr").find('td:nth-child(4)').text();
			// 	// console.log(item_id);
			// 	$('#edit_form').show();
			// 	$('#txt_edit_item_id').val(item_id);
			// 	$('#txt_edit_item_name').val(item_name);
			// 	$('#txt_edit_item_price').val(item_price);
			// })
			
			// // 确认修改
			// $('#confirm_edit_btn').click(function(){
			// 	// console.log($('#txt_edit_item_id').val());
			// 	$.ajax({
			// 		url: 'http://chonghekj.com/crud/index.php/Home/Index/editItem',
			// 		type: 'post',
			// 		dataType: 'json',
			// 		data: {
			// 			item_id: $('#txt_edit_item_id').val(),
			// 			item_name: $('#txt_edit_item_name').val(),
			// 			item_price: $('#txt_edit_item_price').val()
			// 		},
			// 		success: function(res){
			// 			console.log(res);
			// 			getList();
			// 		}
			// 	})
			// })
			
			
			// // 删除
			// $('#delete_btn').click(function(){
			// 	var ids = [];
			// 	// 获取被选中复选框的item_id
			// 	var target = $('.ckitem:checked').parents("tr").find(".txt_itemid");
			// 	// console.log(target);
			// 	for(var i=0; i<target.length; i++){
			// 		ids.push(target[i].innerText);
			// 	}
			// 	// console.log(ids);
				
			// 	if(ids.length == 0){
			// 		alert("请选择需要被删除的物品项");
			// 	}else{
			// 		var isConfirm = confirm("确定是否删除选中的物品项");
					
			// 		if(isConfirm){
			// 			$.ajax({
			// 				url: 'http://chonghekj.com/crud/index.php/Home/Index/deleteItem',
			// 				type: 'post',
			// 				dataType: 'json',
			// 				data: {
			// 					ids: ids
			// 				},
			// 				success: function(res){
			// 					console.log(res);
			// 					if(res.code == 0){
			// 						getList();
			// 					}
			// 				}
			// 			}) 	
			// 		}
			// 	}
							
			// })
			
			// 拉取列表
			function getList(){
				// console.log(111);
				$.ajax({
					url: 'http://chonghekj.com/crud/index.php/Home/Index/getItemList',
					type: 'get',
					dataType: 'json',
					data: {
						pageSize: pagesize,
						pageNumber: current,
						item_name: $('#txt_search_itemname').val()
					},
					success: function(res){
						console.log(res);
						$('.dataList tbody').empty();
						var data = res.rows;
						
						for(var i=0; i<data.length; i++){
							var html = "";
							html = "<tr>"
									+"<td><input type='checkbox' class='ckitem'></td>"
									+"<td class='txt_itemid'>"+data[i].item_id+"</td>"
									+"<td>"+data[i].item_name+"</td>"
									+"<td>"+data[i].item_price+"</td>"
								   +"</tr>"
							$('.dataList tbody').append(html);	
						}
						
						initPage(res.total, pagesize, current);
					}
				})
			}
			
		</script>
	</body>
</html>
